<template>
  <div>
 

    <sky-panel title="经典风格。">
      <template v-slot:header>
        <span>封装 Element 的 Form 组件，实现查询、重置等功能，并提供了三种布局风格。</span>
      </template>
      <template v-slot:main>
    <div class="searh">
      <sky-search-panel
        :data="classicData"
        @search-submit="searchSubmit1"
        @reset-submit="resetSubmit1"
      />
      <div>
        查询/重置后的数据：{{ formData1 }}
      </div>
    </div>
      </template>
    </sky-panel>

  
    <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

      &lt;sky-search-panel
        :data="classicData"
        @search-submit="searchSubmit1"
        @reset-submit="resetSubmit1"
      /&gt;
          
        </code>
        <code class="javascript">

      setup() {


        //下方都用的这个数据格式 下面例子就不在重复这段
        const classicData = [
          {
            label: '即时配送',
            value: true,
            itemType: 'switch',
            field: 'delivery'
          },
          {
            label: '活动名称',
            value: '',
            itemType: 'input',
            field: 'name',
            placeholder: '活动名称',
            clearable: true,
            rules: [
              {
                required: true,
                message: '请输入活动名称'
              }
            ]
          },
          {
            label: '活动区域',
            value: '',
            itemType: 'select',
            placeholder: '活动区域',
            clearable: true,
            field: 'region',
            options: [
              {
                title: '区域一',
                value: 'fujian'
              },
              {
                title: '区域二',
                value: 'beijing'
              }
            ],
            rules: [
              {
                itemType: 'string',
                required: true,
                message: '请选择活动区域'
              }
            ]
          },
          {
            label: '特殊资源',
            value: '2',
            itemType: 'radio',
            field: 'resource',
            radioType: 'button', // button or radio
            options: [
              {
                label: '线上品牌商赞助',
                value: '1'
              },
              {
                label: '线下场地免费',
                value: '2'
              }
            ]
          },
          {
            label: '日选择器',
            value: '',
            itemType: 'datePicker',
            field: 'date1',
            clearable: true,
            format: 'YYYY-MM-DD',
            placeholder: '请选择日期'
          },
          {
            label: '月选择器',
            value: '',
            itemType: 'datePicker',
            field: 'date2',
            clearable: true,
            format: 'YYYY-MM',
            placeholder: '请选择日期'
          },
          {
            label: '范围选择器',
            value: [],
            itemType: 'datePicker',
            field: 'date3',
            clearable: true,
            type: 'daterange',
            rangeSeparator: '至',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
          },
          {
            label: '周选择器',
            value: '',
            itemType: 'datePicker',
            field: 'date4',
            type: 'week',
            clearable: true,
            placeholder: '请选择日期'
          }
        ]

        const formData1 = ref&lt;{[key: string]: any} | null&gt;(null)
      
        function searchSubmit1(data: any): void {
          formData1.value = data
        }

        function resetSubmit1(data: any): void {
          formData1.value = data
        }

   
        return {
          classicData,
          formData1, searchSubmit1, resetSubmit1,
        }
      }
                  
        </code>
    </pre>
    </div>
  </sky-code-panel>


  
    <sky-panel title="  底部操作按钮风格。">
      <template v-slot:header>
        <span>封装 Element 的 Form 组件，实现查询、重置等功能，并提供了三种布局风格。</span>
      </template>
      <template v-slot:main>

     <div class="searh">
      <sky-search-panel
        layout="bottom"
        :data="classicData"
        @search-submit="searchSubmit2"
        @reset-submit="resetSubmit2"
      />
      <div>
        查询/重置后的数据：{{ formData2 }}
      </div>
    </div>

      </template>
    </sky-panel>

    <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

      &lt;sky-search-panel
        layout="bottom"
        :data="classicData"
        @search-submit="searchSubmit2"
        @reset-submit="resetSubmit2"
      /&gt;
          
        </code>
        <code class="javascript">

      setup() {

        const formData2 = ref&lt;{[key: string]: any} | null&gt;(null)
      
        function searchSubmit2(data: any): void {
          formData2.value = data
        }

        function resetSubmit2(data: any): void {
          formData2.value = data
        }

   
        return {
          classicData,
          formData2, searchSubmit2, resetSubmit2,
        }
      }
                  
        </code>
    </pre>
    </div>
  </sky-code-panel>



    <sky-panel title="  右侧操作按钮风格。">
      <template v-slot:header>
        <span>封装 Element 的 Form 组件，实现查询、重置等功能，并提供了三种布局风格。</span>
      </template>
      <template v-slot:main>

      <div class="searh">
      <sky-search-panel
        layout="right"
        :data="classicData"
        @search-submit="searchSubmit3"
        @reset-submit="resetSubmit3"
      />
      <div>
        查询/重置后的数据：{{ formData3 }}
      </div>
    </div>

      </template>
    </sky-panel>

    <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

      &lt;sky-search-panel
        layout="right"
        :data="classicData"
        @search-submit="searchSubmit3"
        @reset-submit="resetSubmit3"
      /&gt;
          
        </code>
        <code class="javascript">

      setup() {

        const formData3 = ref&lt;{[key: string]: any} | null&gt;(null)
      
        function searchSubmit3(data: any): void {
          formData3.value = data
        }

        function resetSubmit3(data: any): void {
          formData2.value = data
        }

   
        return {
          classicData,
          formData3, searchSubmit3, resetSubmit3,
        }
      }
                  
        </code>
    </pre>
    </div>
  </sky-code-panel>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { classicData } from '../data/classic-data'
export default defineComponent({
  // name: 'SearchDemo',
  setup() {
    const formData1 = ref<{[key: string]: any} | null>(null)
    const formData2 = ref<{[key: string]: any} | null>(null)
    const formData3 = ref<{[key: string]: any} | null>(null)

    function searchSubmit1(data: any): void {
      formData1.value = data
    }

    function resetSubmit1(data: any): void {
      formData1.value = data
    }

    function searchSubmit2(data: any): void {
      formData2.value = data
    }

    function resetSubmit2(data: any): void {
      formData2.value = data
    }

    function searchSubmit3(data: any): void {
      formData3.value = data
    }

    function resetSubmit3(data: any): void {
      formData3.value = data
    }

    return {
      classicData,
      formData1, searchSubmit1, resetSubmit1,
      formData2, searchSubmit2, resetSubmit2,
      formData3, searchSubmit3, resetSubmit3
    }
  }
})
</script>

<style lang="scss" scoped>
.searh {
  background: #fff;
  padding: 20px;
}
</style>
